<template>
    <div class="order_detail">
        <el-page-header @back="goBack" style="margin-bottom:20px;">
        </el-page-header>
        <el-descriptions title="订单详情" style="background-color: #fff;padding:20px;margin-bottom: 20px;">
            <el-descriptions-item label="订单号">{{getOrderDetail.order_number}}</el-descriptions-item>
            <el-descriptions-item label="收货人">{{getOrderDetail.user_name}}</el-descriptions-item>
            <el-descriptions-item label="商品名">{{getOrderDetail.goods_name}}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{getOrderDetail.order_time}}</el-descriptions-item>
            <el-descriptions-item label="收货地址">{{getOrderDetail.order_address}}</el-descriptions-item>

            <el-descriptions-item label="订单状态">
                <el-tag size="small" type="" v-if="getOrderDetail.order_status=='待发货'">待发货</el-tag>
                <el-tag size="small" type="warning" v-else-if="getOrderDetail.order_status=='待收货'">待收货</el-tag>
                <el-tag size="small" type="success" v-else-if="getOrderDetail.order_status=='已完成'">已完成</el-tag>
                <el-tag size="small" type="danger" v-else-if="getOrderDetail.order_status=='已取消'">已取消</el-tag>
                <el-tag size="small" type="danger" v-else>退货</el-tag>
                <el-select v-model="status" placeholder="改变订单状态" style="margin:0 20px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="statusSub" style="margin-left:20px;">提交</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="退货原因" v-if="this.status==5">
                <el-input type="text" v-model="reason" placeholder="请输入退款原因"></el-input>
            </el-descriptions-item>
            
        </el-descriptions>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status: '',
            getOrderDetail: [],
            reason:'',
            options: [{
                value: '1',
                label: '待发货'
            }, {
                value: '2',
                label: '待收货'
            }, {
                value: '3',
                label: '已完成'
            }, {
                value: '4',
                label: '已取消'
            }, {
                value: '5',
                label: '退货'
            }],
        }
    },
    filters: {
        formatDate: function (value, args) {
            var dt = new Date(value);
            if (args == 'yyyy-M-d') {// yyyy-M-d
                let year = dt.getFullYear();
                let month = dt.getMonth() + 1;
                let date = dt.getDate();
                return `${year}-${month}-${date}`;
            } else if (args == 'yyyy-M-d H:m:s') {// yyyy-M-d H:m:s
                let year = dt.getFullYear();
                let month = dt.getMonth() + 1;
                let date = dt.getDate();
                let hour = dt.getHours();
                let minute = dt.getMinutes();
                let second = dt.getSeconds();
                return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
            } else if (args == 'yyyy-MM-dd') {// yyyy-MM-dd
                let year = dt.getFullYear();
                let month = (dt.getMonth() + 1).toString().padStart(2, '0');
                let date = dt.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${date}`;
            } else {// yyyy-MM-dd HH:mm:ss
                let year = dt.getFullYear();
                let month = (dt.getMonth() + 1).toString().padStart(2, '0');
                let date = dt.getDate().toString().padStart(2, '0');
                let hour = dt.getHours().toString().padStart(2, '0');
                let minute = dt.getMinutes().toString().padStart(2, '0');
                let second = dt.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
            }
        }
    },
    created() {
        this.getOrderDetail = this.$store.state.OrderDetail
        console.log('OrderDetail', this.getOrderDetail)
        if (!this.getOrderDetail) {
            this.$router.push('/order')
        }
    },
    methods: {
        goBack() {
            this.$router.push('/order')
        },
        statusSub() {
            console.log(this.status)
            console.log(this.getOrderDetail.id)
            let temp = this.$options.filters['formatDate'];
            this.$ajax({
                method: "post",
                url: "/api/OrderStatus_submit",
                params: { status: this.status, id: this.getOrderDetail.id,reason:this.reason,applyTime:temp(new Date())}
            }).then(res => {
                console.log(res)
                this.$message({
                    message: '订单状态改变成功！',
                    type: 'success'
                });
            });
            this.$router.push('/order')
        }
    },
    inject: ['reload']
}
</script>

<style lang="less" scoped>
.order_detail {
    padding: 20px;

}

/deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
}

/deep/ .el-icon-arrow-up {
    line-height: 30px;
}
</style>